{extend name="base/common"}

{block name="style"}
<link rel="stylesheet" href="__STATIC__/datepicker/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="__STATIC__/iCheck/custom.css">
<style>
    .bookTop {width:1420px;height:80px;text-align: center;line-height: 80px;background: #F8F8F8;margin-left: 100px;position: relative;}
    .bookTop p {font-size: 20px;color: #333;font-weight: 900;width:90%;overflow: hidden;margin: auto}
    .bookTop div {
        width: 135px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-size: 18px;
        background: #818F9C;
        border-radius: 6px;
        position: absolute;
        top:50%;
        margin-top: -20px;
        right:23px;
        cursor: pointer;
    }
    .bookContent {width:1420px;position: relative;margin:120px auto 0;overflow: hidden;}
    .bookContent ul {width:1500px;position: relative;overflow: hidden;}
    .bookContent li {
        width: 450px;
        height: 80px;
        background: #F8F8F8;
        float: left;
        margin-right: 36px;
        margin-bottom: 35px;
    }
    .bookContent li a {
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
        color: #666;
        font-size: 18px;
        text-align: center;
        line-height:80px;
    }
    .fixed {
        width:100%;
        height:100%;
        position: fixed;
        top:0;
        left:0;
        z-index: 9999;
        background: rgba(0,0,0,.7);
        display: none;
    }
    .fixedBook {
        width:988px;
        height:580px;
        background: #fff;
        margin:-290px auto 0;
        position: relative;
        top:50%;
    }
    .fixedBook01 {width:100%;height:70px;text-align: center;line-height: 70px;color: #333;font-size: 20px;}
    .fixedDetail {width:924px;height:400px;background: #F8F8F8;margin: auto;overflow-y: scroll;}
    .fixedSort {width:100%;height:66px;line-height: 66px;font-size: 16px;color: #666;padding-left: 34px;position: relative;cursor: pointer;}
    .fixedSort:hover {background: #eee;}
    input[name="member"] {
        width:12px;
        height:12px;
        border: 1px solid #818F9C;
        float:right;
        margin-right: 38px;
        position: relative;
        top:50%;
        margin-top: -6px;
        cursor: pointer;
        outline: none;
    }
    input[name="member"].checked {
        background-image: url('/DDDeducation/public/home/images/rank/book.jpg');
        width:17px;
        height:13px;
        border: none;
        outline: none;
        position: relative;
        right:-4px;
    }
    .btns {text-align: right;width:100%;margin-top: 32px;}
    .btns span {
        display: block;
        width:135px;
        height:40px;
        text-align: center;
        line-height: 40px;
        font-size: 18px;
        border-radius: 6px;
        cursor: pointer;
        float:right;
        margin-right: 22px;
        border: 1px solid #164C6D;
        color: #333;
    }
    .btns span:hover {
        border: 1px solid #818F9C;
        color: #fff;
        background: #818F9C;
    }
    input, textarea, select {
        outline: 0;
        border: 0;
        -webkit-appearance: none;
    }
    .showbox {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        /*padding: 5%;*/
        background: rgba(0, 0, 0, 0.3);
        display: none;
        width: 100%;
        height: 100%;
    }

    .loader {
        position: relative;
        margin: 0 auto;
        width: 100px;
        margin-top: 70%;
    }
    .loader:before {
        content: '';
        display: block;
        padding-top: 50%;
    }

    .circular {
        animation: rotate 2s linear infinite;
        height: 100%;
        transform-origin: center center;
        width: 100%;
        position: absolute;
        top: -98vw;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    .path {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
        stroke-linecap: round;
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -35px;
        }
        100% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -124px;
        }
    }
    @keyframes color {
        100%,
        0% {
            stroke: #d62d20;
        }
        40% {
            stroke: #0057e7;
        }
        66% {
            stroke: #008744;
        }
        80%,
        90% {
            stroke: #ffa700;
        }
    }
</style>
{/block}

{block name="page-header"}
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>测试排名</h2>
        <ol class="breadcrumb">
            <li>
                成绩录入
            </li>
            <li class="active">
                <strong>新增</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
{/block}

{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5></h5>
                    <div class="ibox-tools">
                        <a href="javascript:window.history.go(-1);" class="btn btn-white btn-sm"><i class="fa fa-reply"></i> 返回</a>
                    </div>
                </div>
                <div class="ibox-content all">
                    <form id="form" class="form-horizontal" method="post">
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>测试学员:</label>
                            </div>
                            <div class="col-lg-8">
                                <div class="input-group">
                                    <input type="text" placeholder="输入姓名" class="input-sm form-control" name="name" value="" data-openid="">
                                    <span class="input-group-btn">
                                         <button class="btn btn-primary submit-btn sel" type="button" target-form="form-horizontal" >查询</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>测试成绩:</label>
                            </div>
                            <div class="col-lg-6">
                                <input type="number" min="0" class="form-control form_title" name="score" value="0">
                            </div>
                        </div>
                        <div class="form-group" id="timeRange">
                            <div class="col-lg-1 text-right control-label">
                                <label>测试时间:</label>
                            </div>
                            <div class="col-lg-6">
                                <div class="date" >
                                    <input type="text" placeholder="请输入测试时间" class="form-control datetimepicker" name="test_time"  value=""/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-11 col-lg-offset-1">
                                <button class="btn btn-primary submit-btn post-put" type="button" target-form="form-horizontal" >提交</button>
                            </div>
                        </div>
                        <div class="selblo"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!--弹出框-->
<div class="fixed">
    <div class="fixedBook">
        <p class="fixedBook01">学员搜索</p>
        <div class="fixedDetail">

        </div>
        <div class="btns">
            <span id="ok" data-value="" data-id="">确认</span>
            <span id="cancel">取消</span>
        </div>
    </div>
</div>
<div class="showbox">
    <div class="loader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
        </svg>
    </div>
</div>
{/block}

{block name="script"}
<script src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
<script src="__STATIC__/datepicker/bootstrap-datetimepicker.js"></script>
<script src="__STATIC__/iCheck/icheck.min.js"></script>
<script src="__ADMIN__/js/plugins/sweetalert/sweetalert.min.js"></script>
<script>
    $(function(){
        highlight_subnav("{:Url('Test/index')}");
        //    时间日历
        $( ".datetimepicker" ).datetimepicker( {
            language:  'cn',
            format: 'yyyy-mm-dd hh:ii',
            minView: "hour",
            forceParse: false,
            todayBtn: true,
            autoclose: true,
            todayHighlight: 1,
            minuteStep: 5

        });
        $('.sel').on('click',function(){
            var name = $("input[name='name']").val();
            if (name == ''){
                updateAlert('姓名为空', 'error');
                return false;
            }
            $.ajax({
                type:"post",
                url:"{:Url('Test/sel')}",
                data:{name:name},
                beforeSend:function () {
                    $(".showbox").show();
                },
                success:function(data){
                    $(".showbox").hide();
                    $('.fixedDetail div').remove();
                    if(data.code == 1){
                        var data = data.data;
                        var html='';
                        for(var i=0;i<data.length;i++){
                            html+='<div class="fixedSort"><span>'+data[i].name+'——'+data[i].order_id+'——'+data[i].school_id+'</span><input type="radio"  value="'+data[i].openid+'"  name="member" /></div>'
                        }
                        $('.fixed .fixedDetail').append(html);
                    }
                    $('.fixed').show();
                    $('body').css('position','fixed');
                    $('.fixedDetail .fixedSort').on('click',function(){
                        $('.fixedSort').find('input').removeClass("checked");
                        $(this).find('input').addClass("checked");
                        $(".btns #ok").attr("data-value",$(this).find("span").text())
                        $(".btns #ok").attr("data-id",$(this).find("input").val())
                    });
                    $('#cancel').on('click',function(){
                        $('.fixed').hide();
                        $('body').css('position','relative');
                    });
                    $('#ok').on('click',function(){
                        $('.fixedSort').each(function(){
                            if($(this).find('input').hasClass('checked')){
                                $("input[name='name']").val($(this).find('span').text());
                                $('.fixed').hide();
                                $('body').css('position','relative');
                            }
                        });
                        $("input[name='name']").attr("data-openid",$(this).attr("data-id"))
                    })
                }
            });
        });
        //发布
        $(".post-put").off('click').on("click",function(){
            var it=$(this);
            var code = "{$code}";
            if($("input[name='name']").attr('data-openid') == '' || $("input[name='name']").attr('data-openid') == null){
                updateAlert('请输入测试学员', 'error');
                return;
            }
            if($("input[name='score']").val() <= 0){
                updateAlert('请输入测试成绩', 'error');
                return;
            }
            if($("input[name='test_time']").val() == '' || $("input[name='test_time']").val() == null){
                updateAlert('请选择测试时间', 'error');
                return;
            }
            document.getElementsByClassName("post-put").disabled=true;
            var datas = {
                openid:$("input[name='name']").attr('data-openid'),
                score:$("input[name='score']").val(),
                test_time:$("input[name='test_time']").val(),
                status:0,
                code:code,
            };
            $.ajax({
                type:"post",
                url:"{:Url('Test/play')}",
                data:{openid:datas.openid,code:code},
                beforeSend:function () {
                    $(".showbox").show();
                },
                success:function(dataa){
                    $(".showbox").hide();
                    if(dataa.code == 1){
                        // 已有成绩
                        swal({
                            title: "温馨提示！",
                            text: "该学员此次测试已有成绩录入，确认覆盖？",
                            type: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#DD6B55",
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            closeOnConfirm: true
                        }, function(){
                            datas['type'] = 1;
                            $.ajax({
                                type:"post",
                                url:"{:Url('Test/edit')}",
                                data:datas,
                                beforeSend:function () {
                                    $(".showbox").show();
                                },
                                success:function(data){
                                    $(".showbox").hide();
                                    if(data.code == 1){
                                        if (data.url) {
                                            updateAlert(data.msg + ' 页面即将自动跳转~','success');
                                        }else{
                                            updateAlert(data.msg ,'success');
                                        }
                                        it.prop('disabled','true');
                                        it.prev().prop('disabled','true');
                                        setTimeout(function(){
                                            if (data.url) {
                                                location.href=data.url;
                                            } else {
                                                location.reload();
                                            }
                                            it.removeAttr('disabled');
                                            it.prev().removeAttr('disabled')
                                        },2000);
                                    } else {
                                        updateAlert(data.msg, 'error');
                                        it.attr('disabled','true');
                                        it.prev().prop('disabled','true');
                                        setTimeout(function(){
                                            it.removeAttr('disabled');
                                            it.prev().removeAttr('disabled')
                                        },2000);
                                    }
                                }
                            });
                        });
                    } else {
                        // 未录入
                        datas['type'] = 2;
                        $.ajax({
                            type:"post",
                            url:"{:Url('Test/edit')}",
                            data:datas,
                            beforeSend:function () {
                                $(".showbox").show();
                            },
                            success:function(data){
                                $(".showbox").hide();
                                if(data.code == 1){
                                    if (data.url) {
                                        updateAlert(data.msg + ' 页面即将自动跳转~','success');
                                    }else{
                                        updateAlert(data.msg ,'success');
                                    }
                                    it.prop('disabled','true');
                                    it.prev().prop('disabled','true');
                                    setTimeout(function(){
                                        if (data.url) {
                                            location.href=data.url;
                                        } else {
                                            location.reload();
                                        }
                                        it.removeAttr('disabled');
                                        it.prev().removeAttr('disabled')
                                    },2000);
                                } else {
                                    updateAlert(data.msg, 'error');
                                    it.attr('disabled','true');
                                    it.prev().prop('disabled','true');
                                    setTimeout(function(){
                                        it.removeAttr('disabled');
                                        it.prev().removeAttr('disabled')
                                    },2000);
                                }
                            }
                        });
                    }
                }
            });
            return false;
        });
    })

</script>
{/block}